@extends('base.base')
@section('base')
<!-- 内容区域 -->
<div class="main-panel">
    <div class="content-wrapper">
        <div class="row">
            <div class="col-12 grid-margin stretch-card">
                <div class="card">
                    <div class="card-body">
                        <h4 class="card-title">请填写商品信息</h4>
                        <form class="forms-sample" id="form">
                            <div class="form-group" style="position: relative;">
                                <label>* 产品分类</label>
                                <div class="item-box"
                                    style="width: 100%;height: 6vh;border: 1px solid #eee;display: flex;justify-content: flex-start;align-items: center;">

                                </div>
                                <div class="product-type"
                                    style="position: absolute;width: 100%;top: 11vh;background-color: white;display: none;padding-bottom: 2vh;overflow-y: scroll;height: 30vh;">

                                </div>
                            </div>
                            <!-- <input type="hidden" class="form-control required" name="id" value="{{$product->id}}"> -->
                            <!-- <div class="form-group group-item">
                                <label>* 产品分类</label> -->
                                <input type="text" style="display:none;" class="form-control classify required" name="cate_id"
                                    value="{{$product->cate_id}}">
                            <!-- </div> -->
                            <div class="form-group group-item">
                                <label>* 产品名称</label>
                                <input type="text" class="form-control required" name="store_name"
                                    value="{{$product->store_name}}">
                            </div>
                            <div class="form-group group-item">
                                <label>* 产品简介</label>
                                <textarea name="store_info" cols="30" rows="5">{{$product->store_info}}</textarea>
                            </div>
                            <div class="form-group group-item">
                                <label>* 产品关键字</label>
                                <input type="text" class="form-control required" name="keyword"
                                    value="{{$product->keyword}}">
                            </div>
                            <div class="form-group group-item">
                                <label>* 产品单位</label>
                                <input type="text" class="form-control required" name="unit_name"
                                    value="{{$product->unit_name}}">
                            </div>
                            <div class="form-group group-item">
                                <label>* 产品条码</label>
                                <input type="text" class="form-control" name="bar_code"
                                    value="{{$product->bar_code}}">
                            </div>
                            <div class="form-group" id="image" style="display: block;">
                                <label>* 产品主图</label>
                                <input type="file" class="file-upload-default  img-filename-show" data-path="config">
                                <input type="hidden" class="image-path value-input">
                                <div class="input-group col-xs-12">
                                    <input type="text" class="form-control file-upload-info form-control-h" disabled=""
                                        value="{{$product->image}}">
                                    <span class="input-group-append">
                                        <button class="file-upload-browse btn btn-gradient-primary"
                                            onclick="upload($(this))" type="button">上传</button>
                                    </span>
                                </div>
                                <div class="img-y">
                                </div>
                            </div>
                            <div class="form-group" id="image" style="display: block;">
                                <label>* 产品轮播图</label>
                                <input type="file" class="file-upload-default img-file" data-path="config">
                                <input type="hidden" class="image-path value-input">
                                <div class="input-group col-xs-12">
                                    <input type="text" class="form-control file-upload-info form-control-y" disabled=""
                                        value="{{$product->slider_image}}">
                                    <span class="input-group-append">
                                        <button class="file-upload-browse btn btn-gradient-primary"
                                            onclick="upload($(this))" type="button">上传</button>
                                    </span>
                                </div>
                                <div class="img-yl">
                                </div>
                            </div>
                            <div class="form-group group-item">
                                <label>* 产品售价</label>
                                <input type="number" class="form-control required" name="price"
                                    value="{{$product->price}}">
                            </div>
                            <div class="form-group group-item">
                                <label>* 产品市场价</label>
                                <input type="number" class="form-control required" name="ot_price"
                                    value="{{$product->ot_price}}">
                            </div>
                            <div class="form-group group-item">
                                <label>* 赠送积分</label>
                                <input type="number" class="form-control required" name="give_integral"
                                    value="{{$product->give_integral}}">
                            </div>
                            <div class="form-group">
                                <label>* 邮费</label>
                                <input type="number" class="form-control required" name="postage"
                                    value="{{$product->postage}}">
                            </div>
                            <div class="form-group">
                                <label>* 销量</label>
                                <input type="number" class="form-control required" name="sales"
                                    value="{{$product->sales}}">
                            </div>
                            <div class="form-group">
                                <label>* 虚拟销量</label>
                                <input type="number" class="form-control required" name="ficti"
                                    value="{{$product->ficti}}">
                            </div>
                            <div class="form-group">
                                <label>* 库存</label>
                                <input type="number" class="form-control required" name="stock"
                                    value="{{$product->stock}}">
                            </div>
                            <div class="form-group">
                                <label>* 产品成本价</label>
                                <input type="number" class="form-control required" name="cost"
                                    value="{{$product->cost}}">
                            </div>
                            <div class="form-group">
                                <label>* 排序</label>
                                <input type="number" class="form-control required" name="sort"
                                    value="{{$product->sort}}">
                            </div>

                            <div class="form-group" style="display: flex;justify-content: space-between;align-items: center;">
                                <label>* 是否包邮</label>
                                <p class="postage" style="display: flex;justify-content: space-between;align-items: center;margin-left: 1vw;margin-bottom: 1.5vh;">
                                    @if($product->is_postage == 1)
                                    <span style="display:inline-block;">
                                        是
                                    </span>
                                    &nbsp;&nbsp;
                                    <input type="radio" class="form-control required" name="is_postage" value=1 checked>
                                    &nbsp;  &nbsp;
                                    <span style="display:inline-block;">
                                        否
                                    </span>
                                    &nbsp;&nbsp;
                                    <input type="radio" class="form-control required" name="is_postage" value=0>
                                    @else
                                    <span style="display:inline-block;">
                                        是
                                    </span>
                                    &nbsp;&nbsp;
                                    <input type="radio" class="form-control required" name="is_postage" value=1>
                                    &nbsp;&nbsp;
                                    <span style="display:inline-block;">
                                        否
                                    </span>
                                    &nbsp;&nbsp;
                                    <input type="radio" class="form-control required" name="is_postage" value=0 checked>
                                    @endif
                                </p>
                            </div>
                            <!-- <div style="display: flex;justify-content: space-between;align-items: center;"> -->
                                <div class="form-group"
                                     style="display: flex;justify-content: space-between;align-items: center;">
                                    <label>* 产品状态</label>
                                    <p  class="grounding"
                                        style="display: flex;justify-content: space-between;align-items: center;margin-left: 1vw;margin-bottom: 1.5vh;">
                                        @if($product->is_show == 1)
                                            <span style="display:inline-block;">上架
                                            </span>
                                            <input type="radio" class="form-control required" name="is_show"
                                                     placeholder="" value=1 checked>
                                            &nbsp;
                                            <span style="display:inline-block;">下架
                                            </span>
                                            <input type="radio" class="form-control required" name="is_show"
                                                           placeholder="" value=0>
                                        @else
                                            <span style="display:inline-block;">上架
                                            </span>
                                            <input type="radio" class="form-control required" name="is_show"
                                                     placeholder="" value=1 >
                                            &nbsp;
                                            <span style="display:inline-block;">下架
                                            </span>
                                            <input type="radio" class="form-control required" name="is_show"
                                                           placeholder="" value=0 checked>
                                        @endif
                                    </p>
                                </div>
                            <!-- </div> -->
                            <div class="form-group " id="text" style="display: block;">
                                <label style="flex-shrink:0;">* 产品简介</label>
                                <textarea placeholder="请在此处编辑内容" id="editor"
                                          style="height:400px;max-height:400px;overflow: hidden"> {{$product->description}}</textarea>
                            </div>

                            <button type="button" onclick="commit()"
                                class="btn btn-sm btn-gradient-primary btn-icon-text">
                                <i class="mdi mdi-file-check btn-icon-prepend"></i>
                                提交
                            </button>
                            <button type="button" onclick="cancel()"
                                class="btn btn-sm btn-gradient-warning btn-icon-text">
                                <i class="mdi mdi-reload btn-icon-prepend"></i>
                                取消
                            </button>
                         
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<style>
    .img-y{
        display:block;

    }
    .img-y img{
        width:120px;
    }
    .img-yl{
        display:block;
        white-space:nowrap;
    }
    .img-yl img{
        width:120px;
    }
    .postage{
        padding-right:10px;
    }
</style>
<script>
    let array = [];
    @foreach($cate_list as $value)
    @if (!empty($value['son']))
        @foreach($value['son'] as $val)
        var obj = { "name": "---{{$val['cate_name']}}", "id": "{{$val['id']}}" }
    array.push(obj);
    @endforeach
    @endif
    @endforeach
    $(document).on('change', '#type', function () {
        if ($(this).val() == 'string') {
            $('#string').show().find('input').attr('name', 'config_value');
            $('#text').hide().find('textarea').removeAttr('name');
            $('#image').hide().find('.value-input').removeAttr('name');
        } else if ($(this).val() == 'text') {
            $('#text').show().find('textarea').attr('name', 'config_value');
            $('#string').hide().find('input').removeAttr('name');
            $('#image').hide().find('.value-input').removeAttr('name');
        } else if ($(this).val() == 'image') {
            $('#string').hide().find('input').removeAttr('name');
            $('#text').hide().find('textarea').removeAttr('name');
            $('#image').show().find('.value-input').attr('name', 'config_value');
        }
    })
    var editor = new wangEditor('editor');
    // 上传图片（举例）
    editor.config.uploadImgUrl = "/admin/wangeditor/upload";
    // 隐藏掉插入网络图片功能。该配置，只有在你正确配置了图片上传功能之后才可用。
    editor.config.hideLinkImg = false;
    editor.create();
    function commit() {
        if (!checkForm()) {
            return false;
        }
        var data = $("#form").serializeObject();
        let imgURL = "http://jyt.admin.com"+$('.img-y').find('img').attr("src");
        let arr = JSON.parse($('.form-control-y').val());
        let msg = $("#editor").val()
    
        Object.assign(data, { cate_id: cateId }, { image: imgURL }, { slider_image: arr }, { description: msg })
        myRequest("/admin/product/edit", "post", data, function (res) {
            layer.msg(res.msg)
        });
    }
    function cancel() {
        parent.location.reload();
    }

    function showImg(){
       
        let imgUrl = $('.form-control-h').val()
        $('.img-y').append(`<img src="${imgUrl}">`)
       
    }
    showImg();

    function showImgH(){
        let arr = JSON.parse($('.form-control-y').val())
        for (var i in arr) {
            $('.img-yl').append(`<img src="${arr[i]}">`)
        }
       
    }
    showImgH();
    function render() {
        console.log($('.classify'))
        for (var i in array) {
            $('.product-type').append(`<div class='product-type-item' style="border-bottom:solid 1px #ccc;padding:1vh 1vw;z-index:2000;" onclick="addClick('${array[i].name}','${array[i].id}')">${array[i].name}</div>`)
        }
    }
    render();
    let cateId = [];
    array.forEach(function (item, index){
        // console.log(item)
        if(item.id==$('.classify').val()){
            cateId.push($('.classify').val())
            $('.item-box').append(`<div class='type-item' style="border-radius:3px;height:90%;display:flex;justify-content: splice-between;align-items: center;padding:0 5px;margin-left:5px;background-color:#eee;"><div style="display:flex;justify-content: center;align-items: center;margin-right:5px;">${item.name}</div><div style="display:flex;justify-content: center;align-items: center;background-color:rgb(216, 145, 145);padding:0 4px;border-radius:2px;font-size:18px;" onclick="deleteClick('${item.id}')">x</div></div>`)
        }else{
            return
        }
    });
    
    function addClick(e, q) {
        
        if (cateId.indexOf(q) == -1) {
            cateId.push(q)
            $('.item-box').append(`<div class='type-item' style="border-radius:3px;height:90%;display:flex;justify-content: splice-between;align-items: center;padding:0 5px;margin-left:5px;background-color:#eee;"><div style="display:flex;justify-content: center;align-items: center;margin-right:5px;">${e}</div><div style="display:flex;justify-content: center;align-items: center;background-color:rgb(216, 145, 145);padding:0 4px;border-radius:2px;font-size:18px;" onclick="deleteClick('${q}')">x</div></div>`)
        } else {
            return
        }
    }
  
    function deleteClick(q) {
        if (cateId.indexOf(q) != -1) {
            $('.type-item').eq(cateId.indexOf(q)).remove()
            cateId.splice(cateId.indexOf(q), 1)
        } else {
            return
        }
    }
    $('.product-type').hide();
    $('.item-box').click(function () {
        $('.product-type').show();
      
    })
    $('.group-item').click(function () {
        $('.product-type').hide();
    })


</script>
@endsection
